<template>
	<view class="home">
		<gyd-navbar back-color="#fff" :is-back="false">
			<template #back>
				<view class="nav-location">
					<view class="location-content">
						<uni-icons type="location-filled" size="20"></uni-icons>
						<text class="value">{{location.street}}</text>
					</view>
				</view>
			</template>
			<template #default>
				<view class="nav-search" style="width: 300rpx;">
					<uni-search-bar v-model="keyword" placeholder="请输入关键字" cancel-button="" radius="32"
						@keydown.enter="keywordSearch"></uni-search-bar>
				</view>
			</template>
			<!-- #ifndef MP-WEIXIN -->
			<template #content>
				<view class="actions">
					<view class="actions-item" @click="pageRoute('/servePages/notice/notice')">
						<uni-badge class="uni-badge-left-margin" :text="noticeTotalNum" absolute="rightTop"
							:offset="[3, 12]">
							<uni-icons type="icon-chat" custom-prefix="iconfont"></uni-icons>
						</uni-badge>
					</view>
				</view>
			</template>
			<!-- #endif -->
		</gyd-navbar>

		<view class="home-content">
			<!--轮播-->
			<template v-if="bannerList.length>0">
				<gyd-swiper :list="bannerList"></gyd-swiper>
			</template>

			<!--快捷菜单-->
			<view class="menu-container">
				<view class="item" v-for="(item,index) in menuList" :key="index" @click="goPage(item)">
					<image class="icon" :src="$imageUrl(item.image)"></image>
					<text class="label">{{item.title}}</text>
				</view>
			</view>

			<!-- 公告 -->
			<view class="announcement">
				<image :src="imgHost + '/static/images/title-notice.png'"></image>
				<swiper class="news" :autoplay="true" circular="true" :interval="2000" :duration="1000" vertical>
					<swiper-item class="news-item-wrap" v-for="(item,index) in systemNotice" :key="index"
						@click="goKuaixun(item)">
						<view class="news-item">{{item.title}}</view>
					</swiper-item>
				</swiper>
			</view>

			<!-- 专区 -->
			<zhuanqu-goods :zhuanqu="zhuanqu"></zhuanqu-goods>

			<!-- 升级礼包 -->
			<zhuanqu-goods :zhuanqu="giftpack"></zhuanqu-goods>

			<!-- 联盟商家 -->
			<view class="card nearby-merchant" v-if="storeList.length > 0">
				<view class="merchant-title">
					<view class="header">
						<view class="left">
							<text class="name">联盟商家</text>
							<text class="tags">以您的距离排序</text>
						</view>
						<view class="right" @click="pageTabRoute('/pages/tabbar/local-life/local-life')">
							查看更多<uni-icons class="icon" type="right" size="18" color="#c2c2c2"></uni-icons>
						</view>
					</view>
				</view>

				<view class="merchant-list">
					<view class="merchant-item" v-for="(store,index) in storeList" :key="index" @click="goStore(store)">
						<image class="bg-logo" :src="store.store_logo"></image>

						<view class="info">
							<image class="avatar" :src="store.store_logo" mode="aspectFill"></image>
							<view class="name">{{store.store_name}}</view>
							<view class="distance">距离您 {{store.distance}} Km</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 精选推荐 -->
			<view class="card product-area" v-if="productList.length > 0">
				<view class="cate-header">
					<view class="cate">
						<text class="cate-item active">精选推荐</text>
						<text class="cate-item right"
							@click="pageRoute('/servePages/integral-shop/integral-product')">查看更多></text>
					</view>
				</view>
				<view class="product-list">
					<integral-goods :goods="item" v-for="(item, index) in productList" :key="index"></integral-goods>
				</view>
			</view>
		</view>

		<contact-kefu ref="kefuRef" :kefu="kefu"></contact-kefu>

		<gyd-upgrade-app ref="upgradeAppRef"></gyd-upgrade-app>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import util from '@/utils/util';
	import {
		reactive,
		toRefs,
		inject,
		ref,
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const state = reactive({
		themeColor: {
			theme: '#0055ff',
		},
		imgHost: util.requestUrl(),
		bannerList: [],
		menuList: [],
		systemNotice: [],
		zhuanqu: {
			name: '',
			tags: '',
			link: '',
			desc: '',
			list: [],
		},
		giftpack: {
			name: '',
			tags: '',
			link: '',
			desc: '',
			list: [],
		},
		storeList: [],
		productList: [],
		kefu: {},
		keyword: '',
		isMore: true,
		noticeTotalNum: 0,
		location: {
			province: '定位中...',
			city: '定位中...',
			area: '定位中...',
			town: '定位中...',
			street: '定位中...',
			address: '',
			areaCode: '',
		}, // 定位信息
	});

	const kefuRef = ref(null);
	const upgradeAppRef = ref(null);

	onLoad((opt) => {
		console.log('onLoad');
		if (opt.hasOwnProperty('invite_code')) {
			cache.set('invite_code', opt.invite_code);
		}
		util.getLocation();
		util.getTheme();
		util.getSystemInfo();
		state.themeColor = cache.get('themeColor');

		getData();
		getStore();

		// #ifdef APP
		checkVersion();
		// #endif
	})

	onShow(() => {
		console.log('onShow');
	})

	onReady(() => {
		console.log('onReady');
		uni.getSystemInfo({
			success: function(info) {
				state.statusBarHeight = info.statusBarHeight;
			}
		});
	})

	onPullDownRefresh(() => {
		console.log("下拉刷新");
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
		state.isMore = true;
	})

	onReachBottom(() => {
		console.log("触底加载更多");
	})

	//检查版本
	function checkVersion() {
		uni.getSystemInfo({
			success: (data) => {
				console.log('系统信息', data);
				request.get('index/getAppVersion', {
					version: data.appVersion,
					appType: 'user',
					platformType: data.platform
				}).then(res => {
					console.log('获取更新', res);
					if (res.code == 1) {
						if (res.data.isUpdate) {
							console.log('需要更新', res.data.isUpdate);
							upgradeAppRef.value.open();
						}
					}
				})
			}
		})
	}

	function getData() {
		request.get('index/index').then(res => {
			console.log('首页数据', res);
			initData(res.data);
		}).catch(err => {
			console.log(err);
			util.showTip('网络异常');
		})
	}

	function initData(data) {
		console.log('初始化数据', data);
		state.bannerList = data.swiper;
		console.log('轮播图', state.bannerList);

		state.menuList = data.menu;
		console.log('菜单', state.menuList);

		state.systemNotice = data.systemNotice;
		console.log('快讯', state.menuList);

		state.zhuanqu = data.zhuanqu;
		console.log('智能水架', state.zhuanqu);

		state.giftpack = data.giftpack;
		console.log('升级礼包', state.giftpack);

		state.storeList = [{
			id: 1,
			store_name: '驭云足疗店',
			store_logo: state.imgHost + '/uploads/202508/295674320250811.png',
			distance: '10.50'
		}, {
			id: 2,
			store_name: '钱伯斯超市',
			store_logo: state.imgHost + '/uploads/202508/912a253a1d3c46e9bfabcad9f38c9cbc.jpg',
			distance: '40.37'
		}, {
			id: 3,
			store_name: '隔云端便利店',
			store_logo: state.imgHost + '/uploads/202508/8dced3a2fa664b66bf41163d850a5add.jpg',
			distance: '150.06'
		}];

		state.productList = data.points_products;
		console.log('积分商品', state.productList);
	}

	function getStore() {
		let params = {
			longitude: cache.get('longitude', false) || '',
			latitude: cache.get('latitude', false) || '',
			type: 2, //0全部商家，1推荐商家，2附近商家
			limit: 6, //只显示前6条数据
		};
		request.get('store/getNearbyStore', params).then(res => {
			console.log('附近商家', res);
		})
	}

	function goPage(item) {
		console.log('页面跳转', item);
		if (item.link == '#') {
			if (item.flag == 'callphone') {
				state.kefu.mobile = item.description;
				kefuRef.value.open();
			}
		} else {
			pageRoute(item.link);
		}
	}

	function keywordSearch() {
		console.log('关键字搜索', state.keyword);
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	}

	function pageTabRoute(url) {
		uni.reLaunch({
			url
		});
	}

	const {
		themeColor,
		imgHost,
		bannerList,
		menuList,
		systemNotice,
		zhuanqu,
		giftpack,
		storeList,
		productList,
		kefu,
		keyword,
		isMore,
		noticeTotalNum,
		location,
	} = toRefs(state);
</script>

<style lang="scss">
	.home {
		.home-content {
			position: relative;
			padding: $m20;

			//快捷菜单
			.menu-container {
				z-index: 999;
				padding: 24rpx;
				border-radius: $radius-12 $radius-12 0 0;
				background: #fff;
				justify-content: space-between;
				display: grid;
				grid-template-columns: repeat(5, 1fr);
				text-align: center;
				box-shadow: 0 4px 12px var(--shadow);

				.item {
					image {
						width: 72rpx;
						height: 72rpx;
					}

					.icon {
						display: block;
						margin: 0 auto;
						width: 72rpx;
						height: 72rpx;
					}

					.label {
						margin: $m12 0 $m16;
						text-align: center;
						font-size: $font-26;
						color: #242424;
					}
				}
			}

			//公告
			.announcement {
				@include f-between;
				height: 86rpx;
				margin-bottom: $m24;
				padding: 0 $m24;
				background-color: $u-bg-reverse-color;
				border-top: 1rpx solid $u-border-color;
				border-radius: 0 0 $radius-12 $radius-12;

				image {
					width: 120rpx;
					height: 46rpx;
				}

				.news {
					overflow: hidden;
					flex: 1;
					height: 100%;
					margin-left: $m24;

					.news-item {
						line-height: 86rpx;
						height: 100%;
					}
				}
			}

			.card {
				overflow: hidden;
				background-color: $u-bg-reverse-color;
				margin-bottom: $m24;
				border-radius: $radius-12 $radius-12 0 0;
			}

			// 联盟商家
			.nearby-merchant {
				.merchant-title {
					padding: 20rpx 20rpx 0 20rpx;
					display: flex;
					flex-direction: column;

					.header {
						display: flex;
						flex-direction: row;
						justify-content: space-between;

						.left {
							.name {
								font-size: 32rpx;
								font-weight: 600;
								color: #000;
							}

							.tags {
								position: relative;
								top: -2rpx;
								font-size: 22rpx;
								color: #ffffff;
								margin-left: 12rpx;
								padding: 4rpx 12rpx 4rpx 12rpx;
								border-radius: 17rpx;
								background: #d3dff7;
							}
						}

						.right {
							font-size: 24rpx;
							color: #7f7f7f;
							line-height: 70rpx;

							.icon {}
						}
					}

					.desc {
						color: #7f7f7f;
						// 文字超出,用省略点代替
						overflow-x: hidden;
						overflow-y: hidden;
						word-break: break-all;
						text-overflow: ellipsis;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						padding-bottom: 20rpx;
					}
				}

				.merchant-list {
					@include f-center;
					padding: 0 $m24 $m24 $m24;

					.merchant-item {
						overflow: hidden;
						width: 202rpx;
						margin-right: $m24;
						background-color: $u-bg-color;
						border-radius: $radius-12;

						.bg-logo {
							width: 202rpx;
							height: 120rpx;

						}

						.info {
							@include f-center(column);
							overflow: hidden;
							width: 100%;
							margin-top: -50rpx;
							// padding: 0 $m20 $m20 $m20;
							padding: 0 0 $m20;

							.avatar {
								z-index: 99;
								width: 90rpx;
								height: 90rpx;
								border-radius: 50%;
								border: 2rpx solid #fff;
							}

							.name,
							.distance {
								width: 100%;
								font-size: $font-24;
								text-align: center;
							}

							.name {
								margin-top: $m8;
								font-size: $font-28;
								color: $u-main-color;
							}

							.distance {
								color: $u-tips-color;
								font-size: 22rpx;
							}
						}

						&:last-child {
							margin: 0;
						}
					}
				}
			}

			// 精选推荐
			.product-area {
				.cate-header {
					position: relative;

					.cate {
						display: flex;
						@include f-center;
						height: 80rpx;
						background: url($web_url + '/static/images/product-decoration.png') no-repeat 0 0 / 195rpx 75rpx;
						overflow-x: auto;

						.cate-item {
							padding: 0 4%;
							text-align: center;
							font-size: $font-32;
							color: $u-tips-color;

							&.active {
								color: $u-main-color;
								font-weight: bold;
							}
						}

						.right {
							font-size: 26rpx;
							position: absolute;
							top: 15rpx;
							right: 10rpx
						}
					}

				}

				//产品列表
				.product-list {
					@include f-between;
					flex-wrap: wrap; // 换行
					padding: $m16 $m20 0;
				}
			}
		}
	}
</style>